<template>
  <view class="withdrawRecord">
    <!-- 日期 -->
    <view class="recordHeader flex flex-align flex-bt">
      <view class="list flex flex-align">
        <view class="btn flex flex-align flex-center active">全部</view>
        <view class="btn flex flex-align flex-center">今日</view>
        <view class="btn flex flex-align flex-center">昨日</view>
        <view class="btn flex flex-align flex-center">最近7天</view>
      </view>
      <view class="right flex flex-align">
        <view class="name flex flex-align">
          <uni-datetime-picker type="daterange" @change="changeLog" v-model="dateRange">日期</uni-datetime-picker>
          <image  src="@/static/team/team21.png" mode="scaleToFill" />
        </view>
        <view class="name">
          <picker @change="bindPickerChange" confirm-button-color="#FE7431" :value="index" :range="array">
            <view class=" flex flex-align">
              <view>状态</view>
              <image  src="@/static/team/team21.png" mode="scaleToFill" />
            </view>
          </picker>
        </view>
      </view>
    </view> 
    <view style="height: 80rpx;"></view>
    <view class="recordList">
      <view class="list bgRadius" v-for="(item,index) in 10" :key="index">
        <view class="name flex flex-center">提现申请</view>
        <view class="price flex flex-center"> ¥567.00</view>
        <view class="listname flex flex-align flex-bt">
          <view class="left">申请时间</view>
          <view class="right">2022/08/21 21:34</view>
        </view>
        <view class="listname flex flex-align flex-bt">
          <view class="left">提现账户</view>
          <view class="right">微信钱包</view>
        </view>
        <view class="listname flex flex-align flex-bt">
          <view class="left">提现状态</view>
          <view class="right">审核中</view>
        </view>
      </view>
      
    </view>
    
  </view>
</template>

<script setup lang="ts">
import { withdrawList } from '@/api/user';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
const dateRange = ref<string[]>([]);
const array = ['全部', '审核中', '审核通过', '审核未通过'];
const index = ref(0);
const dataList = ref<Recordable>([])
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
dateRange.value = [formattedDate,formattedDate]
const total = ref(0)
const parme = ref({
  page:1,
  size:10,
  status:0,
  start_at:dateRange.value[0],
  end_at:dateRange.value[1],
})
onLoad(() => {
  getList()
})
onReachBottom(() => {
  if(dataList.value.length == total.value) {
    return
  }
  parme.value.page = parme.value.page + 1
  getList()
})
function bindPickerChange(e: any) {
  console.log('picker发送选择改变，携带值为', e.detail.value);
  index.value = e.detail.value;
}
function changeLog(e:any){
  parme.value.start_at = dateRange.value[0]
  parme.value.end_at = dateRange.value[1]
  parme.value.page = 1
  getList()
}
function getList() {
  // 在这里获取列表数据并更新 dataList
  withdrawList().then((res: any) => {
    dataList.value = res.data;
  })
}
</script>

<style scoped lang="scss">
.withdrawRecord{padding: 20rpx 30rpx;}
.recordHeader{position: fixed;top:0;left:0;width: 100%;z-index: 11;box-sizing: border-box;padding: 20rpx 30rpx;background: #F5F6F7;
  .list{
    .btn{
      height: 44rpx;padding: 0 24rpx;font-size: 22rpx;background: #fff;
      border-radius: 44rpx;
      border: 1rpx solid #fff;
      color: #969799;
      margin-right:10rpx;
    }
    .btn.active{
      background: #FE7431;
      color: #fff;
    }
 }
 .right{
  .name{position: relative;
    font-size: 24rpx;color: #323333;
    view{margin-left: 10rpx;}
    image{width: 32rpx;height: 32rpx;}
    
  }
 }
}
.recordList{
  .list{border-radius: 16rpx;padding: 30rpx;
    .name{color: #969799;font-weight: bold;font-size: 24rpx;}
    .price{
     font-size: 32rpx;color: #FE7431;font-weight: bold;margin: 10rpx 0;
    }
    .listname{margin-top: 15rpx;
      .left{color: #969799;font-weight: bold;font-size: 24rpx;}
     .right{color: #323333;font-size: 24rpx;font-weight: bold;}
    }
  }
}
.date-picker{position: fixed;z-index: 11;top: 0;left: 1000rpx;}
</style>